<template>
  <div class="app-category">
    <app-header />
    <div ref="searchWrap" class="search-wrap">
      <list-scroll class="nav-side-wrapper">
        <ul class="nav-side">
          <li v-for="(item, index) in categoryData" :key="item.id" :class="{ active: currentIndex === index }" @click="selectMenu(index, item.id)" v-text="item.category_name"></li>
        </ul>
      </list-scroll>
      <!-- /side -->
      <list-scroll class="search-content">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <template v-for="(cate, pIndex) in categoryData">
              <div v-if="currentIndex === pIndex" :key="pIndex" class="swiper-slide">
                <template v-if="categoryData[pIndex]">
                  <div v-for="(sub, index) in categoryData[pIndex].children" :key="index">
                    <p class="goods-title">{{ sub.category_name }}</p>
                    <div class="category-list">
                      <div v-for="(category, cIndex) in sub.children" :key="cIndex" class="category-item" @click="selectProduct(category.id)">
                        <!-- <img class="item-img" :src="category.pic_url" /> -->
                        <img class="item-img" src="https://img13.360buyimg.com/focus/s140x140_jfs/t11854/206/2608610926/11359/16925d51/5a1bdd6aNf4a822a5.jpg" />
                        <p class="category-title">{{ category.category_name }}</p>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </template>
          </div>
        </div>
      </list-scroll>
      <!-- /content -->
    </div>
  </div>
</template>
<script>
import { reactive, toRefs } from 'vue'
import { fetchCategories, fetchCategoriesById } from '@/api/index'
import { Toast } from 'vant'
import './index.scss'

export default {
  me: 'CategoryIndex',
  setup() {
    Toast.loading('加载中...')
    const state = reactive({
      categoryData: [],
      currentIndex: 0,
    })

    fetchCategories().then((data) => {
      state.categoryData = data
      Toast.clear()
    })

    const selectMenu = (index, id) => {
      state.currentIndex = index

      fetchCategoriesById(id).then((data) => {
        state.categoryData[index].children = data
      })
      return false
    }

    const selectProduct = () => {}

    return {
      ...toRefs(state),
      selectMenu,
      selectProduct,
    }
  },
}
</script>

<style lang="scss"></style>
